<template>
  <div class="createClass">
    <el-form ref="classroomForm" :model="classroomForm" :rules="classroomRules" label-width="120px">
      <el-form-item label=" 名称" prop="classroomName">
        <el-input
          v-model="classroomForm.classroomName"
          placeholder="最多输入16个字"
          max="16"
          style="width:480px"
        />
      </el-form-item>
      <el-form-item label="所属校区" prop="belongCampus">
        <el-button v-if="!classroomForm.belongCampus" @click="showDialog">选择校区</el-button>
        <div v-if="classroomForm.belongCampus" class="course-tag">
          <div class="course-title">{{ classroomForm.belongCampus }}</div>
          <el-button v-if="classroomForm.belongCampus&&!classroomId" @click="showDialog">更换校区</el-button>
        </div>
      </el-form-item>
      <el-form-item label="可容纳人数" prop="maxPerson">
        <el-input v-model="classroomForm.maxPerson" style="width:480px">
          <template slot="append">人</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="stepBtn">
      <el-button @click="stepCancel">取消</el-button>
      <el-button type="primary" @click="stepConfirm">确定</el-button>
    </div>
    <!-- 选择校区弹框 -->
    <createCampusDialog
      :dialog="selectCampusDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmClick"
    />
  </div>
</template>

<script>
import createCampusDialog from './campusdialog'
export default {
  components: {
    createCampusDialog
  },
  data() {
    return {
      classroomId: '',
      selectCampusDialog: false,
      classroomForm: {
        classroomName: '',
        belongCampusId: '',
        belongCampus: '',
        maxPerson: ''
      },
      classroomRules: {
        classroomName: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
        belongCampus: [{ required: true, message: '请选择课程', trigger: 'blur' }],
        maxPerson: [{ required: true, message: '请输入可容纳人数', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    // 如果有id，获取id对应的数据
    this.classroomId = this.$route.query.classroomId
  },
  methods: {
    showDialog() {
      this.selectCampusDialog = true
    },
    cancelClick() {
      this.selectCampusDialog = false
    },
    confirmClick(data) {
      this.selectCampusDialog = false
      this.classroomForm.belongCampusId = data.id
      this.classroomForm.belongCampus = data.name
    },
    stepCancel() {
      this.$refs.classroomForm.resetFields()
      this.$router.go(-1)
    },
    stepConfirm() {
      // 提交表单
      this.$refs.classroomForm.validate((valid) => {
        if (valid) {
          this.$refs.classroomForm.resetFields()
          this.$router.go(-1)
        } else {
          return false
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.createClass {
  padding: 20px;
  padding-top: 40px;
  .course-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    height: 60px;
    padding: 10px 20px 10px 10px;
    color: #353535;
    font-size: 0;
    background: #f5f7fa;
    .course-title {
      width: 210px;
      overflow: hidden;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .stepBtn {
    margin:40px 0 0 250px;
  }
}
</style>
